<template>
  <div class="yun-page">
    <div class="yun-card card1">
      <img src="@/assets/img/home/bg1.png" alt="">
      <div class="yun-cardview yun-card1">
        <h3 class="yun-title">GAMIFIED PREDICTION MARKETS</h3>
        <p class="yun-sbtitle">Powered by DeFi, NFTs and Polkadot.</p>
        <div class="yun-btn">Join Telegram</div>
      </div>
    </div>
    <!-- <div class="yun-card card2">
      <div class="yun-cardview yun-card2">
        <div class="yun-left">
          <h3 class="yun-title">Our Vision</h3>
          <p class="yun-doc">
            Polkamarkets is a DeFi-Powered Prediction Market built for
            cross-chain information exchange and trading, where users take
            positions on outcomes of real world events–in a decentralized and
            interoperable platform on Polkadot.
          </p>
        </div>
        <div class="yun-right">
          <img src="@/assets/img/card2.png" alt="" />
        </div>
      </div>
    </div> -->
    <!-- <div class="yun-card card3">
      <div class="yun-points">
        <img src="@/assets/img/points.png" alt="" />
      </div>
      <div class="yun-cardview yun-card3">
        <div class="yun-left">
          <img src="@/assets/img/card3.png" alt="" />
        </div>
        <div class="yun-right">
          <h3 class="yun-title">The Product</h3>
          <p class="yun-doc">
            Users can monetise their forecasts of future outcomes and events
            within an interoperable and decentralized infrastructure, where your
            beliefs become assets with financial value traded openly on the
            market. Buy & Sell fractions of event outcomes, or even create your
            own events where others can take their own positions. Participate &
            Provide Liquidity to Earn.
          </p>
        </div>
      </div>
    </div> -->
    <!-- <div class="yun-card card4">
      <div class="yun-cardview yun-card4">
        <h3 class="yun-title">ENTERTAINMENT DEFI</h3>
        <p class="yun-doc">
          More than just a prediction market, Polkamarkets will have important
          entertainment features. These include NFT-based gamification, live
          streaming integration for in-play positions on Esports & Sports, and
          daily crypto price markets. Live chats and virtual events in online
          communities will also form a key entertainment value-add to our
          platform.
        </p>
      </div>
    </div> -->
    <!-- <div class="yun-card card5">
      <div class="yun-cardview yun-card5">
        <div class="yun-vbg">
          <div class="yun-points1">
            <img src="@/assets/img/points.png" alt="" />
          </div>
          <div class="yun-points2">
            <img src="@/assets/img/points.png" alt="" />
          </div>
        </div>

        <div class="yun-vcont">
          <h3 class="yun-title">Our Features</h3>
          <div class="yun-list">
            <div
              class="yun-item"
              v-for="(item, index) in featuresList"
              :key="index"
            >
              <img class="yun-item-icon" :src="item.icon" alt="" />
              <div class="yun-item-title">{{ item.title }}</div>
              <div class="yun-item-doc">{{ item.doc }}</div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- <div class="yun-card card6">
      <div class="yun-cardview yun-card6">
        <div class="yun-title">Roadmap Timeline</div>
        <div class="yun-sbtitle">
          Phase 1 starts in the first quarter of the year with the delivery of
          the Minimum Viable Product (MVP).
        </div>
        <div class="yun-roadmap">
          <div class="roadmap-bg"></div>
          <div class="yun-list">
            <div
              class="yun-item"
              v-for="(item, index) in roadmapList"
              :key="index"
            >
              <div class="yun-item-title">{{ item.title }}</div>
              <div class="yun-item-cont">
                <p v-for="(ww, key) in item.list" :key="key">{{ ww }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- <div class="yun-card card7">
      <div class="blue-card"></div>
      <div class="yun-cardview yun-card7">
        <div class="yun-points">
          <img src="@/assets/img/points.png" alt="" />
        </div>
        <div class="yun-left">
          <h3 class="yun-title">Whitelisting is open. Check Tokenomics.</h3>
          <div class="yun-btn">Join Telegram</div>
        </div>
        <div class="yun-right">
          <img src="@/assets/img/card7.png" alt="" />
        </div>
      </div>
    </div> -->
    <!-- <div class="yun-card card8">
      <div class="yun-points">
        <img src="@/assets/img/wpoints.png" alt="" />
      </div>
      <div class="yun-cardview yun-card8">
        <h3 class="yun-title">Frequently Asked Questions</h3>
        <p class="yun-sbtitle">We're Here to Help!</p>
        <div class="yun-list">
          <div class="yun-card-item" :class="{ active: activeId == 1 }">
            <div class="yun-card-head" @click="activeId = 1">
              <span>What is Polkmarkets?</span>
              <i class="selectIcon"></i>
            </div>
            <div class="yun-card-cont">
              <p>
                <span>Prediction Markets Creation:</span>$POLK is required for
                users to open new markets on Polkamarkets. If you want to know
                the future and receive the wisdom of the crowd, you must use
                $POLK.
              </p>
              <p>
                <span>Mining: </span>Users and LPs earn $POLK by making
                forecasts on the platform, and by providing liquidity to
                Polkamarkets.
              </p>
              <p>
                <span>Direct Fees for Liquidity Providers (LPs): </span>All
                markets on Polkamarkets pay a 0.3% trading fee. 2/3 of all
                trading fees (0.2%) on Polkamarkets will be paid to LPs in the
                token (ETH / DOT for example) in which they were collected. The
                remaining 1/3 of fees (0.1%) are used to auto-buy $POLK via
                smart contract on decentralised exchanges.
              </p>
              <p>
                <span>Yield Farming: </span>Achieving higher and higher tiers of
                earned $POLK will unlock exclusive NFTs, access to bigger
                markets, and special features.
              </p>
              <p>
                <span>Gamification: </span>Users and LPs earn $POLK by making
                forecasts on the platform, and by providing liquidity to
                Polkamarkets.
              </p>
            </div>
          </div>
          <div class="yun-card-item" :class="{ active: activeId == 2 }">
            <div class="yun-card-head" @click="activeId = 2">
              <span>What are Polkamarkets use cases?</span>
              <i class="selectIcon"></i>
            </div>
            <div class="yun-card-cont">
              <p>
                <span>Prediction Markets Creation:</span>$POLK is required for
                users to open new markets on Polkamarkets. If you want to know
                the future and receive the wisdom of the crowd, you must use
                $POLK.
              </p>
              <p>
                <span>Mining: </span>Users and LPs earn $POLK by making
                forecasts on the platform, and by providing liquidity to
                Polkamarkets.
              </p>
              <p>
                <span>Direct Fees for Liquidity Providers (LPs): </span>All
                markets on Polkamarkets pay a 0.3% trading fee. 2/3 of all
                trading fees (0.2%) on Polkamarkets will be paid to LPs in the
                token (ETH / DOT for example) in which they were collected. The
                remaining 1/3 of fees (0.1%) are used to auto-buy $POLK via
                smart contract on decentralised exchanges.
              </p>
              <p>
                <span>Yield Farming: </span>Achieving higher and higher tiers of
                earned $POLK will unlock exclusive NFTs, access to bigger
                markets, and special features.
              </p>
              <p>
                <span>Gamification: </span>Users and LPs earn $POLK by making
                forecasts on the platform, and by providing liquidity to
                Polkamarkets.
              </p>
            </div>
          </div>
          <div class="yun-card-item" :class="{ active: activeId == 3 }">
            <div class="yun-card-head" @click="activeId = 3">
              <span
                >How is Polkamarkets different from existing prediction
                markets?</span
              >
              <i class="selectIcon"></i>
            </div>
            <div class="yun-card-cont">
              <p>
                <span>Prediction Markets Creation:</span>$POLK is required for
                users to open new markets on Polkamarkets. If you want to know
                the future and receive the wisdom of the crowd, you must use
                $POLK.
              </p>
              <p>
                <span>Mining: </span>Users and LPs earn $POLK by making
                forecasts on the platform, and by providing liquidity to
                Polkamarkets.
              </p>
              <p>
                <span>Direct Fees for Liquidity Providers (LPs): </span>All
                markets on Polkamarkets pay a 0.3% trading fee. 2/3 of all
                trading fees (0.2%) on Polkamarkets will be paid to LPs in the
                token (ETH / DOT for example) in which they were collected. The
                remaining 1/3 of fees (0.1%) are used to auto-buy $POLK via
                smart contract on decentralised exchanges.
              </p>
              <p>
                <span>Yield Farming: </span>Achieving higher and higher tiers of
                earned $POLK will unlock exclusive NFTs, access to bigger
                markets, and special features.
              </p>
              <p>
                <span>Gamification: </span>Users and LPs earn $POLK by making
                forecasts on the platform, and by providing liquidity to
                Polkamarkets.
              </p>
            </div>
          </div>
          <div class="yun-card-item" :class="{ active: activeId == 4 }">
            <div class="yun-card-head" @click="activeId = 4">
              <span>Who can use Polkamarkets?</span>
              <i class="selectIcon"></i>
            </div>
            <div class="yun-card-cont">
              <p>
                <span>Prediction Markets Creation:</span>$POLK is required for
                users to open new markets on Polkamarkets. If you want to know
                the future and receive the wisdom of the crowd, you must use
                $POLK.
              </p>
              <p>
                <span>Mining: </span>Users and LPs earn $POLK by making
                forecasts on the platform, and by providing liquidity to
                Polkamarkets.
              </p>
              <p>
                <span>Direct Fees for Liquidity Providers (LPs): </span>All
                markets on Polkamarkets pay a 0.3% trading fee. 2/3 of all
                trading fees (0.2%) on Polkamarkets will be paid to LPs in the
                token (ETH / DOT for example) in which they were collected. The
                remaining 1/3 of fees (0.1%) are used to auto-buy $POLK via
                smart contract on decentralised exchanges.
              </p>
              <p>
                <span>Yield Farming: </span>Achieving higher and higher tiers of
                earned $POLK will unlock exclusive NFTs, access to bigger
                markets, and special features.
              </p>
              <p>
                <span>Gamification: </span>Users and LPs earn $POLK by making
                forecasts on the platform, and by providing liquidity to
                Polkamarkets.
              </p>
            </div>
          </div>
          <div class="yun-card-item" :class="{ active: activeId == 5 }">
            <div class="yun-card-head" @click="activeId = 5">
              <span>What is Polkamarkets token ($POLK) utility?</span>
              <i class="selectIcon"></i>
            </div>
            <div class="yun-card-cont">
              <p>
                <span>Prediction Markets Creation:</span>$POLK is required for
                users to open new markets on Polkamarkets. If you want to know
                the future and receive the wisdom of the crowd, you must use
                $POLK.
              </p>
              <p>
                <span>Mining: </span>Users and LPs earn $POLK by making
                forecasts on the platform, and by providing liquidity to
                Polkamarkets.
              </p>
              <p>
                <span>Direct Fees for Liquidity Providers (LPs): </span>All
                markets on Polkamarkets pay a 0.3% trading fee. 2/3 of all
                trading fees (0.2%) on Polkamarkets will be paid to LPs in the
                token (ETH / DOT for example) in which they were collected. The
                remaining 1/3 of fees (0.1%) are used to auto-buy $POLK via
                smart contract on decentralised exchanges.
              </p>
              <p>
                <span>Yield Farming: </span>Achieving higher and higher tiers of
                earned $POLK will unlock exclusive NFTs, access to bigger
                markets, and special features.
              </p>
              <p>
                <span>Gamification: </span>Users and LPs earn $POLK by making
                forecasts on the platform, and by providing liquidity to
                Polkamarkets.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      homeData:this.$lang[this.$store.state.lang],
      activeId: 5,
    };
  },
  '$store.state.lang'(val){
		//变化之后根据自己项目需求写自身的逻辑代码，下面只是示例
     	this.homeData=this.$lang[this.$store.state.lang]
	},
};
</script>
<style lang='scss' scoped>
.yun-page {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  .yun-card {
    width: 100%;
    position: relative;
    &.card1 {
      width: 100%;
      height: 648px;
      background-image: url("~@/assets/img/bg1.png");
      background-size: 100% 100%;
    }
    &.card2 {
      width: 100%;
      height: 690px;
      background-image: url("~@/assets/img/bg2.png");
      background-size: 100% 100%;
    }

    &.card3 {
      width: 100%;
      height: 890px;
      background-image: url("~@/assets/img/bg3.png");
      background-size: 100% 100%;
      .yun-points {
        position: absolute;
        top: 30px;
        right: 20px;
      }
    }
    &.card4 {
      width: 100%;
      height: 518px;
      background-image: url("~@/assets/img/bg4.png");
      background-size: 100% 100%;
    }
    &.card5 {
      width: 100%;
      height: 1400px;
      background-image: url("~@/assets/img/bg5.png");
      background-size: 100% 100%;
    }
    &.card6 {
      width: 100%;
      height: 996px;
      background-image: url("~@/assets/img/bg6.png");
      background-size: 100% 100%;
    }
    &.card7 {
      width: 100%;
      height: 660px;
      background: #fff;
      .blue-card {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 867px;
        height: 545px;
        background: #e2eff8;
      }
    }
    &.card8 {
      width: 100%;
      min-height: 1640px;
      background-image: url("~@/assets/img/bg8.png");
      background-size: 100% 100%;
      .yun-points {
        position: absolute;
        top: 15%;
        left: 2%;
      }
    }
    .yun-cardview {
      width: 1365px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      &.yun-card1 {
        padding-top: 80px;
        .yun-title {
          font-size: 62px;
          font-family: Pill Alt 600mg;
          font-weight: bold;
          color: #31313b;
          text-align: center;
        }
        .yun-sbtitle {
          margin-top: 30px;
          font-size: 36px;
          font-family: Pill Alt 600mg;
          font-weight: 400;
          color: #828282;
          text-align: center;
        }
        .yun-btn {
          width: 222px;
          height: 69px;
          border: 2px solid #404fe0;
          border-radius: 8px;
          margin: 100px auto;
          font-size: 24px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #404fe0;
          text-align: center;
          line-height: 69px;
          cursor: pointer;
          &:hover{
            background:#404fe0;
            color:#fff;
          }
        }
      }
      &.yun-card2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .yun-left {
          width: 590px;
          .yun-title {
            font-size: 72px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #ffffff;
          }
          .yun-doc {
            font-size: 28px;
            font-family: PingFang SC;
            font-weight: 300;
            color: #ffffff;
            line-height: 47px;
            margin-top: 80px;
          }
        }
        .yun-right {
          width: 635px;
          height: 690px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }
      &.yun-card3 {
        display: flex;
        justify-content: center;
        align-items: center;
        .yun-left {
          width: 635px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        .yun-right {
          width: 590px;
          .yun-title {
            font-size: 72px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #31313b;
          }
          .yun-doc {
            font-size: 28px;
            font-family: PingFang SC;
            font-weight: 300;
            color: #828282;
            line-height: 47px;
            margin-top: 80px;
          }
        }
      }
      &.yun-card4 {
        .yun-title {
          font-size: 72px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
        }
        .yun-doc {
          margin-top: 60px;
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 300;
          color: #ffffff;
          line-height: 47px;
          text-align: center;
        }
      }
      &.yun-card5 {
        position: absolute;
        top: 160px;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        .yun-vbg {
          width: 1100px;
          height: 100%;
          margin: 0 auto;
          background: #3b96d31f;
          // opacity: 0.15;
          border-radius: 10px;
          .yun-points1 {
            position: absolute;
            left: -140px;
            top: 120px;
          }
          .yun-points2 {
            position: absolute;
            right: -140px;
            bottom: 40px;
          }
        }
        .yun-vcont {
          width: 100%;
          position: absolute;
          top: 0;
          bottom: 0;
          z-index: 2;
          .yun-title {
            text-align: center;
            font-size: 72px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #000000;
            margin-top: 30px;
          }
          .yun-list {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            .yun-item {
              width: 30%;
              height: 436px;
              background: #ffffff;
              box-shadow: 0px 10px 65px 0px rgba(7, 17, 126, 0.26);
              border-radius: 10px;
              margin: 70px 1.5% 0;
              text-align: center;
              padding: 30px;
              cursor: pointer;
              &:hover{
                transform: scale(1.1);
              }
              .yun-item-icon {
                margin: 0 auto;
              }
              .yun-item-title {
                font-size: 32px;
                font-family: Pill Alt 600mg;
                font-weight: 500;
                color: #31313b;
                margin-top: 40px;
              }
              .yun-item-doc {
                font-size: 24px;
                font-family: PingFang SC;
                font-weight: 300;
                color: #828282;
                line-height: 34px;
                margin-top: 30px;
              }
            }
          }
        }
      }
      &.yun-card6 {
        width: 1616px;
        .yun-title {
          font-size: 72px;
          font-family: Pill Alt 600mg;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
        }
        .yun-sbtitle {
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 100;
          color: #ffffff;
          line-height: 54px;
          text-align: center;
          margin-top: 30px;
        }
        .yun-roadmap {
          position: relative;
          padding-top: 50px;
          margin-top: 70px;
          .roadmap-bg {
            width: 100%;
            height: 435px;
            background: #e2eff8;
            border-radius: 10px;
          }
          .yun-list {
            width: 1365px;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            .yun-item {
              background: #ffffff;
              box-shadow: 0px 18px 54px 0px rgba(7, 17, 126, 0.46);
              border-radius: 10px;
              padding: 30px;
              text-align: center;
              width: 23%;
              margin: 0 1%;
              cursor: pointer;
              &:hover{
                transform: scale(1.1);
              }
              .yun-item-title {
                font-size: 36px;
                font-family: Pill Alt 600mg;
                font-weight: 500;
                color: #f0980e;
                line-height: 54px;
              }
              .yun-item-cont {
                p {
                  font-size: 24px;
                  font-family: PingFang SC;
                  font-weight: 300;
                  color: #6b6b6b;
                  line-height: 54px;
                }
              }
            }
          }
        }
      }
      &.yun-card7 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .yun-points {
          position: absolute;
          left: 42%;
          top: 80px;
        }
        .yun-left {
          width: 640px;
          .yun-title {
            font-size: 60px;
            font-family: Pill Alt;
            font-weight: 500;
            color: #31313b;
          }
          .yun-btn {
            width: 222px;
            height: 69px;
            background: #404fe0;
            box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
            border-radius: 8px;
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
            line-height: 69px;
            margin-top: 100px;
            cursor: pointer;
          }
        }
        .yun-right {
          width: 588px;
          // height:690px;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
      }
      &.yun-card8 {
        .yun-title {
          font-size: 72px;
          font-family: Pill Alt;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
        }
        .yun-sbtitle {
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 100;
          color: #ffffff;
          line-height: 30px;
          text-align: center;
          margin-top: 15px;
        }
        .yun-list {
          margin-top: 60px;
          .yun-card-item {
            padding: 0 55px;
            background: #fff;
            margin-bottom: 40px;
            .yun-card-head {
              width: 100%;
              height: 96px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              background: #fff;
              cursor: pointer;
              span {
                font-size: 34px;
                font-family: Pill Alt 600mg;
                font-weight: 500;
                color: #202029;
              }
              i {
                display: block;
                width: 22px;
                height: 17px;
                background-image: url("~@/assets/img/home/icon-down.png");
                background-size: 100% 100%;
              }
            }
            .yun-card-cont {
              width: 100%;
              height: 0;
              overflow: hidden;
              border-top: 0px solid #3643cf;
              padding: 0 0;
              p {
                font-size: 28px;
                font-family: PingFang SC;
                font-weight: 300;
                color: #5d5d5d;
                line-height: 36px;
                margin-bottom: 20px;
                span {
                  color: #404fe0;
                }
              }
            }
            &.active {
              .yun-card-head {
                span {
                  color: #3643cf;
                }
                i {
                  display: block;
                  width: 22px;
                  height: 17px;
                  background-image: url("~@/assets/img/home/icon-up.png");
                  background-size: 100% 100%;
                }
              }
              .yun-card-cont {
                height: auto;
                border-top: 3px solid #3643cf;
                padding: 40px 0;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .yun-page {
    width:1920px;
    margin: 0 auto;
    .yun-card {
      width:100%;
      position: relative;
      &.card1 {
        width: 100%;
        height: 500px;
        background-image: url("~@/assets/img/app/home/bg1.png");
        background-size: 100% 100%;
      }
      &.card2 {
        width: 100%;
        height:1140px;
        background-image: url("~@/assets/img/app/home/bg2.png");
        background-size: 100% 100%;
      }

      &.card3 {
        width: 100%;
        height: 1448px;
        background-image: url("~@/assets/img/app/home/bg3.png");
        background-size: 100% 100%;
        .yun-points {
          position: absolute;
          top: 30px;
          right: 20px;
          width:8rem;
          img{
            width:100%;
          }
        }
      }
      &.card4 {
        width: 100%;
        height: 704px;
        background-image: url("~@/assets/img/app/home/bg4.png");
        background-size: 100% 100%;
      }
      &.card5 {
        width: 100%;
        height: 2712px;
        background-image: url("~@/assets/img/app/home/bg5.png");
        background-size: 100% 100%;
      }
      &.card6 {
        width: 100%;
        height: 2346px;
        background-image: url("~@/assets/img/app/home/bg6.png");
        background-size: 100% 100%;
      }
      &.card7 {
        width: 100%;
        height: auto;
        background: #fff;
        .blue-card {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 90%;
          height: 40%;
          background: #e2eff8;
        }
      }
      &.card8 {
        width: 100%;
        min-height: 1985.4px;
        background-image: url("~@/assets/img/app/home/bg7.png");
        background-size: 100% 100%;
        .yun-points {
          position: absolute;
          top: 15%;
          left: 2%;
          width:8rem;
          img{
            width:100%;
          }
        }
      }
      .yun-cardview {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        &.yun-card1 {
          padding-top: 40px;
          .yun-title {
            width:100%;
            font-size: 24px;
            font-family: Pill Alt 600mg;
            font-weight: bold;
            color: #31313B;
            text-align: center;
          }
          .yun-sbtitle {
            margin-top: 20px;
            font-size: 17px;
            font-family: Pill Alt 600mg;
            font-weight: 400;
            color: #828282;
            text-align: center;
          }
          .yun-btn {
            width: 220px;
            height: 60px;
            border: 2px solid #404fe0;
            border-radius: 8px;
            margin: 40px auto;
            font-size: 20px;
            font-family: Pill Alt;
            font-weight: 500;
            color: #404fe0;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
          }
        }
        &.yun-card2 {
          display: block;
           position:static;
          transform: translate(0, 0);
          .yun-left {
            width: 100%;
            padding:40px 15px;
            .yun-title {
              font-size: 48px;
              font-family: Pill Alt;
              font-weight: 500;
              color: #ffffff;
              text-align: center;
            }
            .yun-doc {
              font-size: 20px;
              font-family: PingFang SC;
              font-weight: 300;
              color: #ffffff;
              line-height: 40px;
              margin-top: 40px;
              text-align: center;
            }
          }
          .yun-right {
            display: none;
            width: 635px;
            height: 690px;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
        }
        &.yun-card3 {
          height:100%;
          display: block;
          position:static;
          transform: translate(0, 0);
          padding:120px 0;
          .yun-left {
            width: 100%;
            padding:0 15px;
            overflow: hidden;
            position: absolute;
            top:68%;
            img {
              width: 100%;
            }
          }
          .yun-right {
            width: 100%;
            padding:0 15px;
            position: absolute;
            top:12%;
            .yun-title {
              font-size: 48px;
              font-family: Pill Alt 600mg;
              font-weight: 500;
              color: #31313b;
              text-align: center;
            }
            .yun-doc {
              font-size: 28px;
              font-family: PingFang SC;
              font-weight: 300;
              color: #828282;
              line-height: 40px;
              margin-top: 40px;
              text-align: center;
            }
          }
        }
        &.yun-card4 {
          width:100%;
          padding:0 15px;
          .yun-title {
            font-size: 36px;
            font-family: Pill Alt 600mg;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
          }
          .yun-doc {
            margin-top: 40px;
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: 300;
            color: #ffffff;
            line-height: 40px;
            text-align: center;
          }
        }
        &.yun-card5 {
          width:100%;
          height:100%;
          display: block;
          position:relative;
          left: 0;
          right:0;
          top:90px;
          transform: translate(0, 0);
          .yun-vbg {
            width: 85%;
            height: 100%;
            margin: 0 auto;
            background: #3b96d32f;
            border-radius: 10px;
            .yun-points1 {
              position: absolute;
              left: -55px;
              top: 103px;
              z-index:4;
              width:8rem;
              img{
                width:100%;
              }
            }
            .yun-points2 {
              position: absolute;
              right: -55px;
              bottom: 120px;
              width: 8rem;
              img{
                width:100%;
              }
            }
          }
          .yun-vcont {
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 2;
            .yun-title {
              text-align: center;
              font-size: 48px;
              font-family: Pill Alt;
              font-weight: 500;
              color: #000000;
              margin-top: 30px;
            }
            .yun-list {
              width:100%;
              padding:0 15px;
              .yun-item {
                width: 100%;
                height:auto;
                background: #ffffff;
                box-shadow: 0px 10px 65px 0px rgba(7, 17, 126, 0.26);
                border-radius: 10px;
                margin-top:40px;
                text-align: center;
                padding: 40px 25px;
                .yun-item-icon {
                  margin: 0 auto;
                }
                .yun-item-title {
                  font-size: 28px;
                  font-family: Pill Alt 600mg;
                  font-weight: 500;
                  color: #31313b;
                  margin-top: 30px;
                }
                .yun-item-doc {
                  font-size: 20px;
                  font-family: PingFang SC;
                  font-weight: 300;
                  color: #828282;
                  line-height: 30px;
                  margin-top: 20px;
                }
              }
            }
          }
        }
        &.yun-card6 {
          width: 100%;
          .yun-title {
            font-size: 48px;
            font-family: Pill Alt;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            padding:0 15px;
          }
          .yun-sbtitle {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 100;
            color: #ffffff;
            line-height: 54px;
            text-align: center;
            margin-top: 30px;
            padding:0 15px;
          }
          .yun-roadmap {
            position: relative;
            padding-top: 40px;
            margin-top: 40px;
            .roadmap-bg {
              width: 96%;
              height: 1710px;
              background: #e2eff8;
              border-radius: 10px;
              margin:0 auto;
            }
            .yun-list {
              width: 100%;
              padding:0 15px;
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
              display: block;
              .yun-item {
                background: #ffffff;
                box-shadow: 0px 18px 54px 0px rgba(7, 17, 126, 0.46);
                border-radius: 10px;
                padding: 30px;
                text-align: center;
                width: 100%;
                margin-bottom:40px;
                .yun-item-title {
                  font-size: 36px;
                  font-family: Pill Alt 600mg;
                  font-weight: 500;
                  color: #f0980e;
                  line-height: 54px;
                }
                .yun-item-cont {
                  p {
                    font-size: 24px;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #6b6b6b;
                    line-height: 48px;
                  }
                }
              }
            }
          }
        }
        &.yun-card7 {
          position: static;
          top: 0;
          left: 0;
          transform: translate(0, 0);
          display: block;
          // justify-content: space-between;
          // align-items: center;
          .yun-points {
            position: absolute;
            left: 5%;
            top: 40%;
            width:8rem;
            img{
              width:100%;
            }
          }
          .yun-left {
            width: 100%;
            text-align: center;
            margin-top:60px;
            .yun-title {
              font-size: 48px;
              font-family: Pill Alt;
              font-weight: 500;
              color: #31313b;
            }
            .yun-btn {
              width: 222px;
              height: 69px;
              background: #404fe0;
              box-shadow: 0px 18px 38px 0px rgba(7, 17, 126, 0.3);
              border-radius: 8px;
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #ffffff;
              text-align: center;
              line-height: 69px;
              margin:40px auto;
              cursor: pointer;
            }
          }
          .yun-right {
            width: 100%;
            // height:690px;
            overflow: hidden;
            margin-top:60px;
            img {
              width: 100%;
            }
          }
        }
        &.yun-card8 {
          position: static;
          top: 0;
          left: 0;
          transform: translate(0, 0);
          display: block;
          .yun-title {
            font-size: 48px;
            font-family: Pill Alt;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
          }
          .yun-sbtitle {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 100;
            color: #ffffff;
            line-height: 30px;
            text-align: center;
            margin-top: 15px;
          }
          .yun-list {
            margin-top: 40px;
            padding:0 15px;
            .yun-card-item {
              padding: 0 20px;
              background: #fff;
              margin-bottom: 40px;
              .yun-card-head {
                width: 100%;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: #fff;
                cursor: pointer;
                span {
                  font-size: 22px;
                  font-family: Pill Alt 600mg;
                  font-weight: 500;
                  color: #202029;
                }
                i {
                  display: block;
                  width: 22px;
                  height: 17px;
                  background-image: url("~@/assets/img/home/icon-down.png");
                  background-size: 100% 100%;
                }
              }
              .yun-card-cont {
                width: 100%;
                height: 0;
                overflow: hidden;
                border-top: 0px solid #3643cf;
                padding: 0 0;
                p {
                  font-size: 18px;
                  font-family: PingFang SC;
                  font-weight: 300;
                  color: #5d5d5d;
                  line-height: 30px;
                  margin-bottom: 20px;
                  span {
                    color: #404fe0;
                  }
                }
              }
              &.active {
                .yun-card-head {
                  span {
                    color: #3643cf;
                  }
                  i {
                    display: block;
                    width: 22px;
                    height: 17px;
                    background-image: url("~@/assets/img/home/icon-up.png");
                    background-size: 100% 100%;
                  }
                }
                .yun-card-cont {
                  height: auto;
                  border-top: 3px solid #3643cf;
                  padding: 40px 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
